<template>
<div id="container" @click="handleFolderCilck(myName,myId)">
    <div id="icon"></div>
    <div id="title">{{myName}}</div>
</div>
</template>

<script>
export default {
    name:'Folder',
    props:['name','id'],
    data:function() {
        return{
            myName:this.name,
            myId:this.id,
        }
    },
    // mounted:function() {
    //     console.log(this.$props);
    // }
    methods:{
        handleFolderCilck:function(name,id) {
            this.$emit('click',name,id);
        }
    }
}
</script>

<style lang="scss" scoped>
#container{
    width:120px;
    height: 120px;
    background-color: #fff;
    display: inline-block;
    margin: 10px;
    padding:20px;
    #icon{
        width:120px;
        height:80px;
        background-image: url("~@/assets/pics/folder.png");
        background-size:80px 80px;
        background-repeat:no-repeat;
        background-position:top center;
        background-color: #fff;
    }
    #title{
        width:120px;
        display: inline-block;
        font-size: 12px;
        margin-top:10px;
        text-align: center;
    }
}
#container:hover{
    border-radius: 5px;
    border:2px dotted #409EFF;
    cursor: pointer;
}
</style>